<template>
  <div>
    <p>请选择要设置的营销活动类型</p>
    <hr>
    <el-row :gutter="40">
      <el-col :span="7">
        <div class="campaign_item_wrap">
          <div class="campaign_item">
            <div class="campaign_item_title">立减活动</div>
            <hr>
            <p class='campaign_item_tip'>支持直接在商品价格设置促销价</p>
            <div class="campaign_item_btn_group">
              <p class="campaign_item_btn el-button el-button--primary">
                <router-link :to="{ path: '/operational/activitiesList' }">管理现有活动</router-link>
              </p>
              <p class="campaign_item_btn el-button el-button--primary">
                <router-link :to="{ path: '/operational/createLJCampaign' }">创建立减活动</router-link>
              </p>
            </div>
          </div>
        </div>
      </el-col>
      <!-- <el-col :span="7">
        <div class="campaign_item_wrap">
          <div class="campaign_item">
            <div class="campaign_item_title">立减活动</div>
            <hr>
            <p class='campaign_item_tip'>支持直接在商品价格设置促销价</p>
            <p class="campaign_item_btn"><el-button type="primary">主要按钮</el-button><el-button type="primary">主要按钮</el-button></p>
          </div>
        </div>
      </el-col> -->
    </el-row>
  </div>
</template>
<script>
  export default {

  }
</script>
<style lang='less'>
  .campaign_item_wrap{
    width: 100%;
    height: 300px;
    position: relative;
    background-color: #F9FAFC;
    &:hover{
      background:#EFF2F7;
    }
    .campaign_item{
      position: absolute;
      width: 80%;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .campaign_item_tip{
      text-align: center;
    }
    .campaign_item_title{
      text-align: center;
      font-size: 16px;
    }
    .campaign_item_btn_group{
      text-align: center;
    }
    .campaign_item_btn{
      margin-top: 30px;
      text-align: center;
      a{
        color: #fff;
        text-decoration: none;
      }
    }
  }
</style>
